import React, { useState } from "react";
import { Table, Input } from "antd";
import { useNavigate } from "react-router-dom";
import "./table.scss";

const { Search } = Input;

const UpdateTable = () => {
  const navigate = useNavigate();
  const [searchText, setSearchText] = useState("");
  const [pageSize, setPageSize] = useState(10);
  // 原始数据
  const originData = [
    {
      key: "1",
      program: "应用程序1",
      revise: "7",
      date: "三分钟前",
      outline: "组件：4个新项",
      creater: "自动备份",
      size: "20kb",
      state: "未锁定",
      operate: ["还原", "下载", "删除"],
    },
    {
      key: "2",
      program: "应用程序1",
      revise: "6",
      date: "2021/01/12 21:00",
      outline: "应用程序属性：已修改",
      creater: "自动备份",
      size: "20kb",
      state: "未锁定",
      operate: ["还原", "下载", "删除"],
    },
    {
      key: "3",
      program: "应用程序1",
      revise: "5",
      date: "2021/01/30 21:00",
      outline: "页：已修改1",
      creater: "admin",
      size: "20kb",
      state: "未锁定",
      operate: ["还原", "下载", "删除"],
    },
    {
      key: "4",
      program: "应用程序1",
      revise: "4",
      date: "2021/01/31 21:00",
      outline: "页：已修改1",
      creater: "admin",
      size: "20kb",
      state: "已锁定",
      operate: ["还原", "下载", "删除"],
    },
  ];

  // 过滤搜索数据
  const filteredData = originData.filter((item) =>
    Object.values(item).some((value) =>
      value.toString().toLowerCase().includes(searchText.toLowerCase())
    )
  );
  const onSearch = (value) => {
    setSearchText(value);
  };
  // 列定义
  const columns = [
    { title: "应用程序", dataIndex: "program", key: "program", align: "left", width: 100 },
    { title: "修订", dataIndex: "revise", key: "revise", align: "left", width: 100 },
    { title: "日期", dataIndex: "date", key: "date", align: "left", width: 130 },
    {
      title: "更改概要",
      dataIndex: "outline",
      key: "outline",
      align: "left",
      width: 200,
      render: (text) => <a style={{ color: "#1890ff", cursor: "pointer" }}>{text}</a>,
    },
    { title: "创建者", dataIndex: "creater", key: "creater", align: "left", width: 100 },
    { title: "大小", dataIndex: "size", key: "size", align: "left", width: 100 },
    { title: "状态", dataIndex: "state", key: "state", align: "left", width: 100 },
    {
      title: "操作",
      dataIndex: "operate",
      key: "operate",
      align: "center",
      width: 180,
      render: (actions) =>
        actions.map((action, index) => (
          <a key={index} style={{ color: "#1890ff", marginRight: 10, cursor: "pointer" }}>
            {action}
          </a>
        )),
    },
  ];

  return (
    <div style={{ padding: "16px" }}>
      {/* 搜索栏 */}
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px', marginTop: '13px' }}>
        <div style={{ width: '10px', height: '20px', background: '#1890ff', marginRight: '10px' }} />
        <h3 style={{ margin: 0 }}>管理备份</h3>
        <div style={{ marginLeft: 'auto',marginRight: "15px" }}>
          <Search placeholder="搜索" onSearch={onSearch} style={{ width: 200 }} />
        </div>
      </div>
      {/* 数据表 */}
      <Table
        columns={columns}
        bordered
        dataSource={filteredData}
        pagination={{
          pageSize,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50'],
          onShowSizeChange: (current, size) => setPageSize(size),
        }}
        className="custom-table"
        style={{ marginLeft: "5px", marginRight: "15px", marginTop: "0px" }}
      />
    </div>
  );
};

export default UpdateTable;
